<template>
  <div style="display:block">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="1.5" style="margin-top:7px;margin-left: 60px;" class="acc">设备名称：</el-col>
          <el-col :span="4" class="in">
            <el-input v-model="input" placeholder="请输入设备名称"></el-input>
            <button><img src="../../assets/sou.png"></button>
          </el-col>

          <el-col :span="1.5" style="margin-top:7px;margin-left: 150px;" class="acc">所属机构：</el-col>
          <el-col :span="4">
            <el-select v-model="selectorga" slot="prepend" placeholder="请选择">
              <el-option label="城院罗老师测试" value="1"></el-option>
            </el-select>
          </el-col>
          <el-button style="padding: 3px 0;width: 80px;position: absolute;right: 100px;" type="white">重置</el-button>
          <el-button style="padding: 3px 0;width: 80px;position: absolute;right: 5px;" type="primary">查询</el-button>
        </el-row>
      </div>
    </el-card>
      <div class="choose" v-if="show">
        <p>已选择<span>{{count}}</span>项</p>
        <el-button type="text" size="middle" @click="toggleSelection()">取消选择</el-button>
      </div>
      <el-table
        ref="multipleTable"
        @select="handleSelect"
        @select-all="selectAll"
        :data="tableData"
        style="width: 100%; font-size: 12px; margin-top:10px;"
        stripe
        :header-cell-style="{ background: 'rgb(35, 39, 56)', fontSize:'14px',color: '#fff' }"
        :cell-style="{cellStyle, background: 'rgb(41, 45, 62)', color: '#fff', fontSize:'14px'}"
      >
        <el-table-column
          type="selection"
          width="40">
        </el-table-column>
        <el-table-column
          width="200"
          prop="name"
          label="设备名称"
        ></el-table-column>
        <el-table-column
          prop="mac"
          label="MAC地址"
        ></el-table-column>
        <el-table-column
          width="150"
          prop="group"
          label="所属分组"
        ></el-table-column>
        <el-table-column
          width="220"
          prop="ratio"
          label="分辨率"
        ></el-table-column>
        <el-table-column
          width="150"
          prop="organiazation"
          label="所属机构"
        ></el-table-column>
        <el-table-column
          width="150"
          prop="plan"
          label="当前计划"
        ></el-table-column>
        <el-table-column
          width="200"
          prop="state"
          label="设备状态"
        ></el-table-column>
      </el-table>
    

      <div class="btn">
        <el-button style="padding: 3px 0;width: 80px;" type="white" @click="$router.push('/planlist')">取消</el-button>
        <el-button style="padding: 3px 0;width: 80px;" type="white" @click="preview">上一步</el-button>
        <el-button style="padding: 3px 0;width: 80px;" type="primary" @click="publish">发布</el-button>
      </div>
  </div>
</template>

<script>
import { createPlan } from "../../axios/plan";
import { infoMechanism, getMechanism } from "../../axios/device";
export default {
  data() {
    return {
      input:'',
      selectstate:'',
      count: 0,
      show:0,
      tableData: [],
      name:'',
      date1:'',
      date2:'',
      pattern:''
    }
  },
  created(){
    this.getPlanApi()
  },
  methods:{
    toggleSelection() {
        this.$refs.multipleTable.clearSelection();
        this.count=0;
        this.show=0
        console.log(this.count)
    },
    handleSelect(val) {
      console.log(val)
      if(val.length==0){
        console.log(1)
        this.count--
        if(this.count==0){
          this.show=0
          this.btnBoolean=true
        }
      }else{
        console.log(2)
        this.count++
        this.show=1
        this.btnBoolean=false
      }
      // console.log(this.count)
    },
    selectAll:function () {
      if(this.count==0){
        this.show=1
        this.btnBoolean=false
        this.count=this.tableData.length
      }else{
        this.show=0
        this.btnBoolean=true
        this.count=0
      }
    },
    preview(){
      this.$router.push('/newplan')
    },
    publish(){
      this.name=this.$route.query.name
      this.date1=this.$route.query.date1
      this.date2=this.$route.query.date2
      this.pattern=this.$route.query.pattern
      const arr=[]
      createPlan(this.name,this.pattern,this.date1,this.date1,arr).then(request=>{
        console.log(request)
      })
      this.$router.push('/planlist')
      
    },
    getPlanApi(){
      getMechanism("0","100").then(request=>{
        console.log(request.data.devices)
        let data=request.data.devices
        data.forEach(element => {
          this.tableData.push(
            {
              name:element.Name,
              mac:element.Mac,
              group:'testGroup',
              ratio:'1920x1080(横)',
              organiazation:element.OrganizationID,
              plan:'-',
              state:element.State
            }
          )
        });

      })
    }
  }
}
</script>
<style lang="less" scoped>
.el-card{
  background-color: rgb(41, 45, 62);
  border: 0px;
}
.box-card{
  .acc{
    color: white;
  }
  .in{
    background-color: white;
    display: flex;
    border-radius: 5px;
    input{
      background-color: rgb(35, 39, 56);
      height: 30px;
      width: 120px;
      border:0px;
      margin-right: 3px;
    }
    button{
      width: 30px;
      height: 30px;
      border-radius: 5px;
      background-color: white;
      border: 0px;
      img{
        width: 70%;
        height: 50%;
        margin-top: 5px;
      }
    }
  }
}
.choose{
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  p{
    color: white;
  }
  .el-button{
    position: absolute;
    right: 50px;
  }
}
.btn{
  margin-top: 100px;
  text-align: center;
}
</style>